﻿@model Sharp.WebBooter.Areas.CMS.Models.UserIndexViewModel

<section class="content-header">
    <h1>
        用户管理
    </h1>
    <ol class="breadcrumb">
        <li><a href="@Url.Action("Index", "Home")"><i class="fa fa-home"></i> 首页</a></li>
        <li class="active">用户</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-lg-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <div class="row">
                        <div class="btn-group col-lg-8">

                            @Html.Bootstrap().LinkButton("添加", ToolBarIco.Create).Href(Url.Action("Create")).Attribute("data-toggle", "ajaxModal").Route(Url.Action("Create"))
                            @Html.Bootstrap().LinkButton("删除", ToolBarIco.Delete).Click("window.app.deleteItem('example','" + @Url.Action("Delete") + "')").Route(Url.Action("Delete"))

                            @Html.Bootstrap().LinkButton("权限", ToolBarIco.Permission).Click("ShowWindow(); return false;")
                            @Html.Bootstrap().LinkButton("刷新", ToolBarIco.Refresh).Click("window.app.search();")

                        </div>
                        <div class="col-lg-4">
                            <div class="input-group SearchArea">
                                <input type="text" name="UserName" class="form-control" placeholder="用户名">
                                <div class="input-group-btn">
                                    <button type="button" class="btn btn-default" onclick="window.app.search();"><i class="fa fa-search"></i></button>
                                    <button type="button" class="btn btn-default" title="高级查询" id="toggle-advanced-search">
                                        <i class="fa fa-angle-double-down"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="div-advanced-search" style="display: none;" class="row">
                        <div class="col-lg-12 SearchArea">
                            <form class="form-inline well-sm" style="line-height:38px;">
                                <span>姓　名：</span>
                                <input type="text" name="name" placeholder="姓名" class="form-control">
                                <span>邮　箱：</span>
                                <input type="text" name="email" placeholder="邮箱" class="form-control">
                                <span>　　QQ：</span>
                                <input type="text" name="qq" placeholder="QQ" class="form-control">
                                <br >
                                <span>微　信：</span>
                                <input type="text" name="wechat" placeholder="微信" class="form-control">
                                <span>用户组：</span>
                                @Html.Bootstrap().DropdownList("用户组").Id("userGroupId").DataSource(Model.UserGroups).DisplayField("Title").ValueField("Id")
                                
                                <button id="btn-advanced-search" class="btn btn-default" type="button" onclick="window.app.search();"><i class="fa fa-search"></i> 查询</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="box-body no-padding">

                    <div class="table-responsive">
                        <table id="example" class="table table-bordered table-striped table-hover dataTable text-center" width="100%"></table>
                    </div>

                </div>
            </div>


        </div>
    </div>
</section>

<script type="text/javascript">
    $(document).ready(function () {
        $("#toggle-advanced-search").click(function () {
            $("i", this).toggleClass("fa-angle-double-down fa-angle-double-up");
            $("#div-advanced-search").slideToggle("fast");
        });


        $('#example').dataTable({
            "serverSide": true,
            "ajax": {
                "url": "@Url.Action("GetPaged")",
                "type": "POST"
            },
            "columnDefs": [
                { sDefaultContent: '', aTargets: ['_all'] },
                { "searchable": false, sortable: false, "orderable": false, "targets": [-1, 0, 1, 2] },
                { "sClass": "editableCol", "aTargets": [1] }
            ],
            columns: [
                { title: '<label class="checkbox i-checks"><input type="checkbox" /><i></i></label>', data: function (row, type, set) { return '<label class="checkbox i-checks"><input type="checkbox" name="cellCheckbox" value="' + row.id + '" /><i></i></label>'; }, "bStorable": false, width: 30 },

                {
                    title: "用户名", data: function (row) {
                        return '<a data-toggle="ajaxModal" class="auto" href="@Url.Action("Edit")/' + row.id + '">' + row.userName + '</a>';
                    }
                },
                { title: "邮箱", data: 'email', width: 160, "sClass": "left" },
                { title: "QQ", data: 'qq', width: 80, "sClass": "left" },
                { title: "微信", data: 'wechart', width: 80, "sClass": "left" },
                { title: "最后一次登录", width: 120, data: function (row) { return new Date(row.lastLogonTime).format('yyyy-MM-dd HH:mm:ss') }, "sClass": "center" },
                { title: "创建时间", width: 120, data: function (row) { return new Date(row.checkInTime).format('yyyy-MM-dd HH:mm:ss') }, "sClass": "center" }
            ]
        });
    });

    function ShowWindow() {

        var ids = new Array();

        $("#example tbody tr").each(function (x) {

            var checkbox = $(this).find("td:eq(0) input");

            if (checkbox.length > 0 && checkbox.prop('checked')) {
                ids.push(checkbox.val());
                return;
            }
        });

        if (ids.length == 0) {
            window.app.message("请选中一项。");
            return;
        }
        if (ids.length > 1) {
            window.app.message("只能选中一项。");
            return;
        }

        parent.$('#ajaxModal').remove();

        var $this = $(this)
          , $remote = "@Url.Action("Index", "Permission")" + "?owner=user&ownerId=" + ids[0]
          , $modal = $('<div id="ajaxModal">用来做容器</div>');
        parent.$('body').append($modal);

        $modal.load($remote, function () {
            var newmodal = $modal.children("div").modal();
            newmodal.modal('show');
        });
    }
</script>